<template>
<div>
  <span>
  <el-upload
    :file-list="fileList"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :headers="upload.headers"
    :action="upload.url"
    drag
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
    :on-remove="handleRemove">
    <!-- <i class="el-icon-plus"></i> -->
    <i class="el-icon-upload"></i>
    <span  class="el-upload__text">将文件拖到此处，或<em>点击上传</em></span>
   <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->

  </el-upload>
</span>
  <el-dialog :visible.sync="dialogVisible">
    <img width="90%" height="90%" :src="dialogImageUrl" alt="">
  </el-dialog>
<!-- {{avatar}}=={{name}}=={{userId}} -->
</div>
</template>

<script>
// import { listNetSecurityImg, delNetSecurityImg } from '@/api/websitemanage/netsecurityimg'
// import { getToken } from '@/utils/auth'
import pictureApi from '@/api/dfs/picture'
// import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex' //获取用户id
export default {
  name: 'NetSecurityImg',
  components: {},
    computed: {
    ...mapGetters([
      'avatar','name','userId'
    ])
  },
  data() {
    return {
      // list:[],
      page:1,
      limit:20,
      pictureQuery:{},
      titleName: '图片墙sir',
      form: {},
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      // userId:'',
      // 照片墙
      upload: {
        // 设置上传的请求头部
        // headers: { token: getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/admin/minio/file/upload'
      },
      picture:{}

    }
  },
  created() {
    this.getList2()

    // const hasToken = getToken()

  },
  methods: {
    /** 网安时情图片列表 */
    
    handleRemove(file,fileList) {
      const id = file.uid
      pictureApi.removeById(id)



      // this.fileList={}
      // this.$confirm('是否确认删除此图片asdfasdf?', '警告', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(function() {
      //    const id = file.uid
      //   // return delNetSecurityImg(id)//删除图片
      //   console.log(id)
      //   return pictureApi.removeById(id)
      // }).then(response => {
      //   if (response.success) {
      //      this.fileList={}
      //     this.getList2()
      //     this.msgSuccess('删除成功')
      //   }
      // }).catch(() => {
      //   // this.fileList={}
      //   this.getList2()
      // })
    },
            removeDataById(id){
             this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             teacher.deleteTeacherId(id)
            .then(response=>{//请求成功
                this.$message({
                     type: 'success',
                     message: '删除成功!'
                })
                this.getList()
            })
        })
        },

            //列表方法
        getList2(page = 1){
                // alert(this.userId)
          // const token = getToken();
            // alert(token)获取token

          // this.pictureQuery.username=`admin`
            this.page = page
            this.pictureQuery.username=this.name
            // console.log(this.pictureQuery)
            pictureApi.listByUserId(this.page,this.limit,this.pictureQuery)
            .then(response=>{//请求成功
            // response接口返回的数据
                // console.log(response)
                // this.list = response.data.records
                // this.total = response.data.total
                const imgList = response.data.records
                for (let i = 0; i < imgList.length; i++) {
                  // const userId = imgList[0].userId
                  this.fileList.push({
                    'uid': imgList[i].pid,
                    'url': imgList[i].newFilename
                  })
                }                

                 console.log(this.fileList)  
                //  console.log(this.total) ;
            })
            .catch(error =>{//请求失败
                console.log("请求失败:"+error)
            })
        },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
            // 上传成功回调
    handleAvatarSuccess(res, file) {
      // console.log(res)
      if (res.code==20000) {
        console.log(res)
        // this.teacher.avatar = res.data
        // 强制重新渲染
        this.picture.newFilename=res.data
        this.picture.userId=this.userId
        console.log(this.picture)
        pictureApi.save(this.picture).then(response=>{
          // this.msgSuccess('上传成功')
          this.$message.success('上传成功')
        }).catch(error =>{//请求失败
                console.log("请求失败:"+error)
            })
        this.$forceUpdate()
      } else {
        this.$message.error('上传失败 （非0）')
      }
    },
        // 上传校验
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      console.log(file)
      console.log(file.uid)
      console.log(file.name)
      this.picture.pid=file.uid
      this.picture.originalFilename=file.name

      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss">
.upload2 {
  z-index:9999
}
</style>
